<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" template="/layout/template.xhtml">
	<ui:define name="content">
	<p:dialog header="#{mensaje.titulo_roles}" widgetVar="dialrol"
						resizable="false" modal="true" appendTo="@(body)" width="600"
						height="400" dynamic="true" closable="false">
						<h:form id="rol">
						  <p:panel>
							<h3>#{mensaje.titulo_rol}</h3>
							<h:panelGrid columns="2">
								<p:commandButton action="#{rolBean.guardar()}"
									value="#{mensaje.action_guardar}"
									onclick="PF('dialrol').hide()" update= ":principal:tabView"/>
								<p:commandButton action="#{rolBean.cancelar()}"
									value="#{mensaje.action_cancelar}"
									onclick="PF('dialrol').hide()" />
							</h:panelGrid>
							<p:separator id="separator" />
							<br />
							<h:panelGrid columns="2">
								<p:outputLabel for="name" value="#{mensaje.label_nombre}" />

<!-- 								En el value se pone en donde se va almacenar lo que se introduce en el input -->
								<p:inputText id="name" value="#{rolBean.rol.descripcion}"
									required="true" />
								

							</h:panelGrid>
							<p:pickList value="#{rolBean.tareas}" var="_tarea"
								ajax="false" itemLabel="#{_tarea.descripcion}" itemValue="#{_tarea}"
								converter="#{tareaConverter}">
								<f:facet name="sourceCaption">Tareas Disponibles</f:facet>
								<f:facet name="targetCaption">Tareas Seleccionadas</f:facet>
							</p:pickList>
							</p:panel>
						</h:form>
					</p:dialog>

	
	<p:dialog header="#{mensaje.titulo_tareas}" widgetVar="dialtarea"
						resizable="false" modal="true" appendTo="@(body)" width="300"
						height="200" dynamic="true" closable="false">
						<h:form id="tarea">


							<h3>#{mensaje.titulo_tarea}</h3>

							<h:panelGrid columns="2">
								<p:commandButton action="#{tareaBean.guardar()}"
									value="#{mensaje.action_guardar}"
									onclick="PF('dialtarea').hide()" update =":principal:tabView"/>
								<p:commandButton action="#{tareaBean.cancelar()}"
									value="#{mensaje.action_cancelar}"
									onclick="PF('dialtarea').hide()" />
							</h:panelGrid>
							<p:separator id="separator" />
							<br />

							<h:panelGrid columns="2">
								<p:outputLabel for="nombre" value="#{mensaje.label_nombre}" />

<!-- 								En el value se pone en donde se va almacenar lo que se introduce en el input -->
								<p:inputText id="nombre" value="#{tareaBean.tarea.descripcion}"
									required="true" />
							</h:panelGrid>

						</h:form>
					</p:dialog>
		<p:dialog header="#{mensaje.titulo_usuarios}" widgetVar="dialusuarios"
			resizable="false" modal="true" appendTo="@(body)" width="600"
			height="450" dynamic="true" closable="false">
			<h:form id="usuario">
				<h3>#{mensaje.titulo_usuario}</h3>
				<p:panel id="panelTab1">
					<h:panelGrid columns="2">
						<p:outputLabel for="nombre" value="#{mensaje.label_nombre}" />
						<p:inputText id="nombre" value="#{usuarioBean.nombreUsuario}"
							required="true" />
						<p:outputLabel for="password" value="#{mensaje.label_password}" />
						<p:password id="password" value="#{usuarioBean.usuario.password}" />
					</h:panelGrid>
					<p:commandButton action="#{usuarioBean.guardar()}"
						value="#{mensaje.action_guardar}"
						oncomplete="if (!args.validationFailed)PF('dialusuarios').hide();"
						update=":principal" />

					<p:commandButton action="#{usuarioBean.cancelar()}"
						value="#{mensaje.action_cancelar}"
						onclick="PF('dialusuarios').hide();" immediate="true"/>


					<br />
					<p:pickList value="#{usuarioBean.dualListRol}" var="_rol"
						ajax="false" itemLabel="#{_rol.descripcion}" itemValue="#{_rol}"
						converter="#{rolConverter}">
						<f:facet name="sourceCaption">Roles Disponibles</f:facet>
						<f:facet name="targetCaption">Roles Seleccionadas</f:facet>
					</p:pickList>
				</p:panel>

			</h:form>
		</p:dialog>
		<h:form id="principal">
			<p:growl id="growl" autoUpdate="true" />
			<h1>#{mensaje.titulo_seguridad}</h1>
			<p:separator id="separator" />
			<br />
			<p:tabView id="tabView">
				<!-- Tab para la consulta y creacion de usuarios -->
				<p:tab id="tab1" title="#{mensaje.titulo_usuario}">
					<h:form>
						<h1>#{mensaje.titulo_usuarios}</h1>
						<h:panelGrid columns="2">
							<p:commandButton action="#{usuarioBean.iniciar()}"
								value="#{mensaje.action_nuevo}"
								onclick="PF('dialusuarios').show();" update=":usuario" />

						</h:panelGrid>

						<br />

						<p:dataTable id="usuariosTable" value="#{usuarioList.findAll()}"
							var="_usuario">

							<p:column>
								<f:facet name="header">#{mensaje.label_nombre}</f:facet>
						                        #{_usuario.nombreUsuario}
						                </p:column>

							<p:column>
								<f:facet name="header">#{mensaje.label_opciones}</f:facet>
								<p:commandButton action="#{usuarioBean.iniciar(_usuario)}"
									icon="ui-icon-pencil" onclick="PF('dialusuarios').show()" update=":usuario"/>

								<p:commandButton id="delButton"
									action="#{usuarioBean.eliminar(_usuario)}"
									icon="ui-icon-closethick" update="usuariosTable">
								</p:commandButton>

							</p:column>


						</p:dataTable>



					</h:form>


				</p:tab>

				<!-- Tab para la consulta y creacion de roles  -->
				<p:tab id="tab2" title="#{mensaje.titulo_roles}">

					


					<h:form>
						<h1>#{mensaje.titulo_roles}</h1>

						<h:panelGrid columns="2">
							<p:commandButton action="#{rolBean.iniciar()}"
								value="#{mensaje.action_nuevo}" onclick="PF('dialrol').show()" />

						</h:panelGrid>

						<br />

						<p:dataTable id="table" value="#{rolList.findAll()}" var="_rol">

							<p:column>
								<f:facet name="header">#{mensaje.label_nombre}</f:facet>
						                        #{_rol.descripcion}
						                </p:column>


							<p:column>
								<f:facet name="header">#{mensaje.label_opciones}</f:facet>
								<p:column>
									<f:facet name="header">#{mensaje.label_nombre}</f:facet>
							                        #{_tarea.descripcion}
							                </p:column>

								<p:column>
									<f:facet name="header">#{mensaje.label_opciones}</f:facet>
									<p:commandButton action="#{marcaBean.iniciar(_marca)}"
										icon="ui-icon-pencil" onclick="PF('dialmarca').show()" />

									<p:commandButton id="delButton"
										action="#{proveedorBean.eliminar(_proveedor)}"
										icon="ui-icon-closethick">

									</p:commandButton>

								</p:column>

							</p:column>

						</p:dataTable>
					</h:form>
				</p:tab>

				<!-- Tab para la consulta y creacion de tareas -->
				<p:tab id="tab3" title="#{mensaje.titulo_tareas}">
					<!-- Dialogo para crear  una nueva tareas. -->
					

					<h:form>

						<h1>#{mensaje.titulo_tareas}</h1>

						<h:panelGrid columns="2">
							<p:commandButton action="#{tareaBean.iniciar()}"
								value="#{mensaje.action_nuevo}" onclick="PF('dialtarea').show()" />

						</h:panelGrid>

						<br />
						<p:dataTable id="tabla" value="#{tareaList.findAll()}"
							var="_tarea">

							<p:column>
								<f:facet name="header">#{mensaje.label_nombre}</f:facet>
							                        #{_tarea.descripcion}
							                </p:column>

							<p:column>
								<f:facet name="header">#{mensaje.label_opciones}</f:facet>
								<p:commandButton action="#{marcaBean.iniciar(_marca)}"
									icon="ui-icon-pencil" onclick="PF('dialmarca').show()" />

								<p:commandButton id="delButton"
									action="#{proveedorBean.eliminar(_proveedor)}"
									icon="ui-icon-closethick">

								</p:commandButton>

							</p:column>


						</p:dataTable>
					</h:form>
				</p:tab>

			</p:tabView>
		</h:form>
	</ui:define>
</ui:composition>